<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组更新检测</title>
</head>
<body>
    <div id="vm">
        <ol>
            <li v-for="item in items">
                {{item.name}}
            </li>
        </ol>
        <input type="button" value="测试方法" @click="ceshi">
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#vm',
        data:{
            items:[
                {name:'Maker'},
                {name:'Bob'},
                {name:'Jiffy'}
            ]
        },
        methods:{
            ceshi:function () {
                /*数组后添加元素*/
                // vm.items.push({name:'Frank'})
                /*数组后删除元素*/
                //vm.items.pop()
                /*数组前删除元素*/

                //vm.items.shift()
                /*数组前添加元素*/
                //vm.items.unshift({name:'Stephen'})
                /*指定索引删除指定个数元素*/
                //vm.items.splice(1,1)
                /*反转数组排列顺序*/
                //vm.items.reverse()
                vm.items.sort()
            }
        }
    })

</script>
</body>
</html>